<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { inject, computed } from "vue";
import background from "./background.vue";
import { renderToString } from "@vue/server-renderer";
import { createApp } from "vue";
import { useUserInfoStore } from "@/store/userInfoStore";
const userInfoToken = useUserInfoStore();
import myStorage from "@/utils/localstorage";
import SparkMD5 from "spark-md5";

import {
  getCodeImg,
  login,
  sendEmailCode,
  loginByEmail,
  register,
  qqLogin,
  resetPassword,
} from "@/api/login";

// 引入
import { ElMessage } from "element-plus";
import { getCurrentInstance, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { debounce } from "@/utils/index.js";
// 路径参数
const route = useRoute();
//  路由
const router = useRouter();
const { proxy } = getCurrentInstance();

const starSkyContent = ref("");
// 验证码url
const codeUrl = ref(""); // 初始化为空字符串

onMounted(async () => {
  const app = createApp(background);
  starSkyContent.value = await renderToString(app);

  //  获取验证码
  getCode();

  // 邮箱登录的倒计时
  let sendEndTime = localStorage.getItem("startTimeLogin");
  if (sendEndTime) {
    loginForm.value.countDownIng = true;
    countDown();
  }
});

// 参数
const loginForm = ref({
  // 账号、密码登录
  username: "",
  password: "",
  repassword: "",
  rememberMe: false,
  code: "",
  uuid: "",
  // 新密码
  newpassword: "",

  //  邮箱登录/注册
  formData: {
    email: "",
    ecode: "",
  },

  //倒计时
  countDownTime: 60,
  timer: null,
  countDownIng: false,
});
const loginRef = ref();
const showRef = ref(1);
const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [
    { required: true, trigger: "blur", message: "请输入您的密码" },
    {
      validator: proxy.Verify.password,
      message: "8-18位,可输入数字、字母、特殊字符。",
    },
  ],
  newpassword: [
    { required: true, trigger: "blur", message: "请输入您的新密码" },
    {
      validator: proxy.Verify.password,
      message: "8-18位,可输入数字、字母、特殊字符。",
    },
  ],
  code: [{ required: true, trigger: "blur", message: "请输入验证码" }],
  "formData.email": [
    { required: true, trigger: "blur", message: "请输入正确的邮箱！！" },
    {
      validator: proxy.Verify.email,
      message: "邮箱格式错误",
    },
  ],
  "formData.ecode": [
    { required: true, trigger: "blur", message: "请输入验证码" },
  ],
  repassword: [
    { required: true, trigger: "blur", message: "请再次输入密码" },
    {
      validator: (rule, value, callback) => value === loginForm.value.password,
      trigger: "blur",
      message: "两次密码不一致",
    },
  ],
};

// 验证码的回车事件
const onChange = () => {
  console.log("触发了onChange");
  handleLogin();
};

function handleLogin() {
  // showRef == 1   账号密码登录页面
  if (showRef.value == 1) {
    loginRef.value.validateField(["username", "password"], (errors) => {
      if (errors) {
        // console.log("表单校验结果：", errors);
        let user = {
          username: loginForm.value.username,
          password: loginForm.value.password,
          rememberMe: loginForm.value.rememberMe,
        };

        // 将密码转成MD5加密格式
        let password = SparkMD5.hash(loginForm.value.password);
        login(
          loginForm.value.username,
          password,
          loginForm.value.code,
          loginForm.value.uuid
        )
          .then((res) => {
            console.log("login-res:", res);
            if (res.code == 200) {
              // 要登陆成功后才保存
              let storage = new myStorage();
              // 将数据存储在 Cookies、localStorage 中
              // 勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
              if (loginForm.value.rememberMe) {
                // localStorage,有效期 7天
                storage.setItem({
                  name: "loginInfo",
                  value: user,
                  expires: 604800000,
                });
                // Cookies中 7day
                // 将用户信息存入浏览器cookies中。
                proxy.VueCookies.set("loginInfo", user, "7d");
              } else if (!loginForm.value.rememberMe) {
                storage.removeItem("user");
              }

              let userinfo = res.data;
              // 校验用户权限
              if (userinfo.isAdmin == true) {
                //  登录成功
                ElMessage.success("登录成功");
                // 将返回用户信息保存到store中
                userInfoToken.setUserInfo(userinfo);
                // 将返回的用户信息保存进cookies中
                proxy.VueCookies.set("userInfo", res.data, "7d");
                const redirectUrl = route.query.redirectUrl || "/";
                // 跳转页面
                router.push(redirectUrl);
              } else {
                ElMessage.info("权限不足！");
              }
            }
            if (res.code == 500) {
              // 刷新验证码
              getCode();
            }
            if (res.code == 400) {
              ElMessage.error("验证码错误！");
            }
          })
          .catch((error) => {
            ElMessage.error("无效操作！" + error);
          });
      } else {
        ElMessage.error("参数不符合规则！！");
      }
    });
  }
  //  登录校验

  // showRef == 3   邮箱登陆页面
  if (showRef.value == 3) {
    loginRef.value.validateField(["formData.email"], (errors) => {
      //通过校验
      if (errors) {
        loginByEmail(
          loginForm.value.formData.email,
          loginForm.value.formData.ecode
        ).then((res) => {
          if (res.code == 200) {
            // 将返回的token保存到pinia中
            let userinfo = res.data;
            // 校验用户权限
            if (userinfo.isAdmin == true) {
              ElMessage.success("登录成功");
              // 将返回用户信息保存到store中
              userInfoToken.setUserInfo(userinfo);
              // 将返回的用户信息保存进cookies中
              proxy.VueCookies.set("userInfo", res.data, "7d");
              const redirectUrl = route.query.redirectUrl || "/";
              // 跳转页面
              router.push(redirectUrl);
            } else {
              ElMessage.info("权限不足！");
            }
          }
        });
      } else {
        ElMessage.error("参数不符合规则");
      }
    });
  }
}

//  获取图片验证码
async function getCode() {
  await debounce(
    getCodeImg()
      .then((res) => {
        // console.log("getCodeImg-res:", res);
        codeUrl.value = "data:image/png/gif;base64," + res.img;
        //   将后端传递的图片数据转成base64
        // btoa(
        //   new Uint8Array(res.img).reduce(
        //     (res, byte) => res + String.fromCharCode(byte),
        //     ""
        //   )
        // );
        // 获取后端传递的uuid
        loginForm.value.uuid = res.uuid;
      })
      .catch((error) => {
        throw new Error("无法获取验证码图片数据");
      }),
    3000
  );
}

// 获取邮箱验证码
const emailBtn = () => {
  loginRef.value.validateField(["formData.email"], (errors) => {
    if (errors) {
      sendEmailCode(loginForm.value.formData.email)
        .then((res) => {})
        .catch((error) => {
          throw new Error("发送电子邮件验证码超时");
        });
      countDown();
    } else {
      ElMessage.error("邮箱格式不正确");
    }
  });
};

// 开始计时
const countDown = () => {
  let startTime = localStorage.getItem("startTimeLogin");
  let nowTime = new Date().getTime();
  if (startTime) {
    let surplus = 60 - parseInt((nowTime - startTime) / 1000, 10);
    loginForm.value.countDownTime = surplus <= 0 ? 0 : surplus;
  } else {
    loginForm.value.countDownTime = 60;
    localStorage.setItem("startTimeLogin", nowTime);
  }

  loginForm.value.timer = setInterval(() => {
    loginForm.value.countDownTime--;
    loginForm.value.getCodeDisabled = true;
    loginForm.value.countDownIng = true;
    if (loginForm.value.countDownTime <= 0) {
      localStorage.removeItem("startTimeLogin");
      clearInterval(loginForm.value.timer);
      loginForm.value.countDownTime = 60;
      loginForm.value.countDownIng = false;
    }
  }, 1000);
};
// 参数返回初始状态
function go(Number) {
  if (Number == 1) {
    getCode();
    loginRef.value.resetFields();
    loginForm.value.rememberMe = true;
  }
  if (Number == 3 || Number == 2 || Number == 4) {
    loginForm.value.formData.email = "";
    loginForm.value.formData.ecode = "";
    loginForm.value.username = "";
    loginForm.value.password = "";
    loginForm.value.rememberMe = false;
    loginForm.value.repassword = "";
    loginForm.value.code = "";
    loginForm.value.uuid = "";
  }

  showRef.value = Number;
}
// showRef == 2   账号、密码注册页面
const registerByPassword = () => {
  //  登录校验
  // 确认全部参数都进行过校验
  loginRef.value.validateField(
    ["username", "password", "repassword", "formData.email"],
    (errors) => {
      if (errors) {
        // 将密码转成MD5加密格式
        let password = SparkMD5.hash(loginForm.value.password);
        let repassword = SparkMD5.hash(loginForm.value.repassword);
        register(
          loginForm.value.username,
          password,
          repassword,
          loginForm.value.formData.email,
          loginForm.value.formData.ecode
        ).then((res) => {
          if (res.code == 200) {
            ElMessage.success("注册成功");
            go(1);
          }
        });
      } else {
        ElMessage.error("参数不符合规则");
      }
    }
  );
};

//  获取一次缓存
const getStorage = () => {
  // 从localstorage中获取数据
  let info = new myStorage();
  let value = info.getItem("loginInfo");

  loginForm.value.username = value.username;
  loginForm.value.password = value.password;
};
getStorage();

// qq登录
// const qqlogin = async () => {
//   router.push("/qqlogincallback");
// };

// 微信登录
// const wxlogin = async () => {
//   console.log("该功能暂未实现!");

//   // router.push("/wxlogincallback");
// };
// 重置密码
const resetPasswordByEmail = () => {
  //加密密码
  let password = SparkMD5.hash(loginForm.value.password);
  let newpassword = SparkMD5.hash(loginForm.value.newpassword);
  resetPassword(
    loginForm.value.formData.email,
    loginForm.value.formData.ecode,
    password,
    newpassword
  ).then((res) => {
    if (res.code == 200) {
      ElMessage.success("重置密码成功");
      go(1);
    }
  });
};
</script>

<template>
  <div class="login-page">
    <!-- //登录 -->

    <div class="layer1"></div>

    <div class="layer2"></div>
    <div class="layer3"></div>
    <div class="layer4"></div>

    <div class="layer5"></div>

    <div class="container">
      <el-form
        ref="loginRef"
        :model="loginForm"
        :rules="loginRules"
        class="login-form"
      >
        <div class="logo-title">
          <el-row :gutter="20" style="margin-bottom: 10px">
            <el-col :sm="10" :lg="10" :xs="10" :md="10">
              <img
                src="@/assets/pan.png"
                alt="Logo"
                class=""
                style="
                  width: 60px;
                  height: 60px;
                  margin-top: -2px;
                  margin-left: 60%;
                "
              />
            </el-col>
            <el-col :sm="14" :lg="14" :xs="14" :md="14">
              <p
                class="title1"
                style="
                  font-size: 25px;
                  letter-spacing: 5px;
                  padding-right: 30%;
                  padding-top: 10px;
                "
              >
                Material
              </p>
            </el-col>
          </el-row>
        </div>
        <!-- 账号密码登录 -->
        <div v-show="showRef == 1">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="账号"
              clearable
            >
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
                <!-- <svg-icon icon-class="user" class="el-input__icon input-icon" /> -->
              </template>
            </el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码"
              clearable
              show-password
              :style="{ width: '100%' }"
            >
              <template #prefix>
                <el-icon> <Lock /> </el-icon
              ></template>
            </el-input>
          </el-form-item>
          <!-- 验证码 -->
          <el-form-item prop="code">
            <el-row :gutter="20" style="width: 100%">
              <el-col :sm="14" :lg="14" :xs="14" :md="14" :xl="14">
                <el-input
                  v-model="loginForm.code"
                  size="large"
                  auto-complete="off"
                  placeholder="验证码"
                  @change="onChange"
                  :style="{ width: '100%' }"
                >
                  <template #prefix>
                    <el-icon>
                      <Paperclip />
                    </el-icon>
                  </template>
                </el-input>
              </el-col>
              <el-col :sm="10" :lg="10" :xs="10" :md="10" :xl="10">
                <!-- 验证码图片 -->
                <img
                  v-if="codeUrl"
                  :src="codeUrl"
                  alt="验证码"
                  @click="getCode"
                  style="height: 40px; width: 145px"
                />
                <img
                  v-else
                  src="@/assets/captcha.png"
                  alt="验证码"
                  @click="getCode"
                  style="height: 40px; width: 115px"
                />
              </el-col>
            </el-row>
          </el-form-item>

          <div style="display: flex; height: 40px">
            <el-checkbox
              v-model="loginForm.rememberMe"
              style="margin: 0px 0px 25px 0px"
              >记住密码</el-checkbox
            >
            <el-link @click="go(4)" type="primary" class="email-login"
              >忘记密码</el-link
            >
          </div>

          <el-form-item style="width: 100%">
            <!-- button -->
            <el-button
              size="large"
              type="primary"
              style="width: 100%"
              @click.prevent="handleLogin"
            >
              <span>登 录</span>
            </el-button>

            <div style="float: right; margin-top: 5px; width: 100%">
              <el-row
                :gutter="20"
                width="100%"
                style="justify-content: space-between"
              >
                <el-col :sm="6" :lg="6" :xs="6" :md="6">
                  <el-link @click="go(2)" type="primary">立即注册</el-link>
                </el-col>

                <!-- <el-col :sm="10" :lg="10" :xs="10" :md="10">
                  <el-row>
                    <el-col :sm="13" :lg="13" :xs="13" :md="13">
                      快捷登录
                    </el-col>
                    <el-col
                      :sm="11"
                      :lg="11"
                      :xs="11"
                      :md="11"
                      style="display: flex; flex-direction: row"
                      class="flex space-x-4 ..."
                    >
                      <img
                        src="@/assets/qq-logo.png"
                        @click="qqlogin"
                        style="height: 22px; width: 20px; margin-top: 3px"
                      />
                      <img
                        src="@/assets/wx-logo.png"
                        @click="wxlogin"
                        style="height: 22px; width: 20px; margin-top: 3px"
                      />
                    </el-col>
                  </el-row>
                </el-col> -->

                <el-col :sm="8" :lg="8" :xs="8" :md="8">
                  <el-link
                    @click="go(3)"
                    type="primary"
                    style="margin-left: 34px"
                    >邮箱登录</el-link
                  ></el-col
                >
              </el-row>
            </div>
          </el-form-item>
        </div>
        <!-- 邮箱登录 -->
        <div v-show="showRef == 3" style="height: 303px; width: 350px">
          <el-form-item prop="formData.email">
            <el-input
              v-model="loginForm.formData.email"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="邮箱"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/email.svg"
                  style="width: 11px; height: 11px"
                />
              </template>
            </el-input>
          </el-form-item>
          <!-- 邮箱验证码 -->
          <el-form-item prop="formData.ecode">
            <el-input
              v-model="loginForm.formData.ecode"
              size="large"
              auto-complete="off"
              placeholder="请输入你的邮箱验证码"
              style="width: 63%"
              @change="onChange"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/ercode.svg"
                  style="width: 11px; height: 11px"
              /></template>
            </el-input>
            <div
              style="width: 33%; height: 40px; float: right; margin-left: 10px"
            >
              <el-button
                :style="{ height: '40px' }"
                :disabled="loginForm.countDownIng"
              >
                <span
                  v-if="!loginForm.countDownIng"
                  style="color: deepskyblue"
                  @click="emailBtn"
                  >发送验证码</span
                >
                <span v-if="loginForm.countDownIng"
                  >{{ loginForm.countDownTime }}秒后可重发</span
                >
              </el-button>
            </div>
          </el-form-item>

          <el-form-item style="width: 100%">
            <el-button
              size="large"
              type="primary"
              style="width: 100%"
              @click.prevent="handleLogin"
            >
              <span>登 录/注 册</span>
            </el-button>
          </el-form-item>
          <el-link @click="go(1)" type="primary" style="margin-left: 5px"
            >账号登录</el-link
          >
        </div>

        <!-- 账号注册 -->
        <div v-show="showRef == 2" style="height: 370px; width: 350px">
          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="账号"
            >
              <template #prefix>
                <el-icon>
                  <User />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>
          <!-- 密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="密码"
              clearable
              show-password
              :style="{ width: '100%' }"
            >
              <template #prefix>
                <el-icon>
                  <Unlock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 重复密码 -->
          <el-form-item prop="repassword">
            <el-input
              v-model="loginForm.repassword"
              size="large"
              auto-complete="off"
              placeholder="确认密码"
              style="width: 100%"
              clearable
              show-password
              @change="registerByPassword"
            >
              <template #prefix>
                <el-icon> <Lock /> </el-icon
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="formData.email">
            <el-input
              v-model="loginForm.formData.email"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="邮箱"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/email.svg"
                  style="width: 11px; height: 11px"
                />
              </template>
            </el-input>
          </el-form-item>
          <!-- 邮箱验证码 -->
          <el-form-item prop="formData.ecode">
            <el-input
              v-model="loginForm.formData.ecode"
              size="large"
              auto-complete="off"
              placeholder="请输入你的邮箱验证码"
              style="width: 63%"
              @change="emailBtn"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/ercode.svg"
                  style="width: 11px; height: 11px"
              /></template>
            </el-input>
            <div
              style="width: 33%; height: 40px; float: right; margin-left: 10px"
            >
              <el-button
                :style="{ height: '40px' }"
                :disabled="loginForm.countDownIng"
              >
                <span
                  v-if="!loginForm.countDownIng"
                  style="color: deepskyblue"
                  @click="emailBtn"
                  >发送验证码</span
                >
                <span v-if="loginForm.countDownIng"
                  >{{ loginForm.countDownTime }}秒后可重发</span
                >
              </el-button>
            </div>
          </el-form-item>

          <el-form-item style="width: 100%; margin-top: 10px">
            <el-button
              size="large"
              type="primary"
              style="width: 100%"
              @click="registerByPassword"
            >
              <span>注 册</span>
            </el-button>
          </el-form-item>

          <el-link @click="go(1)" type="primary" style="margin-left: 2px"
            >已有账号</el-link
          >
        </div>

        <div v-show="showRef == 4" style="height: 370px; width: 350px">
          <el-form-item prop="formData.email">
            <el-input
              v-model="loginForm.formData.email"
              type="text"
              size="large"
              auto-complete="off"
              placeholder="邮箱"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/email.svg"
                  style="width: 11px; height: 11px"
                />
              </template>
            </el-input>
          </el-form-item>
          <!-- 邮箱验证码 -->
          <el-form-item prop="formData.ecode">
            <el-input
              v-model="loginForm.formData.ecode"
              size="large"
              auto-complete="off"
              placeholder="请输入你的邮箱验证码"
              style="width: 63%"
              @change="onChange"
            >
              <template #prefix>
                <img
                  src="@/assets/icons/svg/ercode.svg"
                  style="width: 11px; height: 11px"
              /></template>
            </el-input>
            <div
              style="width: 33%; height: 40px; float: right; margin-left: 10px"
            >
              <el-button
                :style="{ height: '40px' }"
                :disabled="loginForm.countDownIng"
              >
                <span
                  v-if="!loginForm.countDownIng"
                  style="color: deepskyblue"
                  @click="emailBtn"
                  >发送验证码</span
                >
                <span v-if="loginForm.countDownIng"
                  >{{ loginForm.countDownTime }}秒后可重发</span
                >
              </el-button>
            </div>
          </el-form-item>
          <!-- 旧密码 -->
          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              type="password"
              size="large"
              auto-complete="off"
              placeholder="输入旧密码"
              clearable
              show-password
              :style="{ width: '100%' }"
            >
              <template #prefix>
                <el-icon>
                  <Unlock />
                </el-icon>
              </template>
            </el-input>
          </el-form-item>

          <!-- 重复密码 -->
          <el-form-item prop="newpassword">
            <el-input
              v-model="loginForm.newpassword"
              size="large"
              auto-complete="off"
              placeholder="输入新密码"
              style="width: 100%"
              clearable
              show-password
              @keyup.enter="resetPasswordByEmail"
            >
              <template #prefix>
                <el-icon> <Lock /> </el-icon
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item style="width: 100%">
            <el-button
              size="large"
              type="primary"
              style="width: 100%"
              @click.prevent="resetPasswordByEmail"
            >
              <span>重置密码</span>
            </el-button>
          </el-form-item>
          <el-link @click="go(1)" type="primary" style="margin-left: 5px"
            >账号登录</el-link
          >
        </div>
      </el-form>
    </div>
  </div>
  <!--  底部  -->
  <!-- <div class="el-login-footer">
        <span>Copyright © 2018-2024 Forest All Rights Reserved.</span>
    </div> -->

  <div v-html="starSkyContent" class="background"></div>
</template>

<style lang="scss">
html,
body {
  height: 100%;
  background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
  overflow: hidden;
}

.logo-title {
  // display: flex;
  align-items: center;
}

.title {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
  font-family: "lato", sans-serif;
  font-weight: 300;
  font-size: 50px;
  letter-spacing: 10px;
  margin-top: -60px;
  padding-left: 10px;
  background: linear-gradient(white, #38495a);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

@function getShadows($n) {
  $shadows: "#{random(100)}vw #{random(100)}vh #fff";

  @for $i from 2 through $n {
    $shadows: "#{$shadows} , #{random(100)}vw #{random(100)}vh #fff";
  }

  @return unquote($shadows);
}

$duration: 1000s;
$count: 1000;

@for $i from 1 through 5 {
  $duration: floor($duration / 2);
  $count: floor($count / 2);

  .layer#{$i} {
    position: fixed;
    $size: #{$i}px;
    width: $size;
    height: $size;
    border-radius: 50%;
    background: #f40;
    box-shadow: getShadows($count);
    animation: moveup $duration linear infinite;

    // 伪类 要定义行级元素 高和宽才能生效
    // display: inline-block;
    &::after {
      content: "";
      position: fixed;
      width: inherit;
      height: inherit;
      left: 0;
      top: 100vh;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}

@keyframes moveup {
  to {
    transform: translateY(-100vh);
  }
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  /* 固定宽度 */

  /* 固定高度 */
  background-color: rgba(255, 255, 255, 0.7);
  // border-top: 2px solid rgba(255, 255, 255, .3);
  /* 半透明背景 */
  /* 毛玻璃效果 */
  backdrop-filter: blur(8px) brightness(90%);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 10px;
  /* 圆角 */
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

.title1 {
  margin: 0px auto 30px auto;
  text-align: center;
  color: #090909;
  text-shadow: 1px -1px rgba(249, 246, 246, 0.4), -1px 1px rgba(79, 77, 77, 0.4);
}

.login-form {
  padding: 25px 25px 5px 25px;
  //   position: relative;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 10px;

  .el-input {
    height: 40px;

    input {
      height: 40px;
    }
  }

  .input-icon {
    height: 39px;
    width: 14px;
    margin-left: 0px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.el-login-footer {
  height: 40px;
  line-height: 40px;
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 12px;
  letter-spacing: 1px;
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}

// 切换按钮位置   子绝父相 给包含两个外面的div 定义为相对定位
.toggle1,
.toggle2 {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 99;
}

.toggle1 img,
.toggle2 img {
  cursor: pointer;
}

.text-bg {
  text-align: center;
  /* 渐变背景 */
  background-image: linear-gradient(to right, #2cd8d5, #c5c1ff, #ffbac3);
  /* 确保渐变应用于文本 */
  -webkit-background-clip: text;
  background-clip: text;
  /* 使文本颜色透明以显示背景 */
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 1.6rem;
}

.email-login {
  margin-left: 200px;
  margin-right: 8px;
  margin-bottom: 11px;
}

.email-login .el-icon--right.el-icon {
  vertical-align: text-bottom;
}

.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.el-form-item {
  display: flex;
  --font-size: 14px;
  margin-bottom: 15px;
}
</style>
